<template>
    <div>
        <!--面包屑导航区域-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home_com' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>我的信息</el-breadcrumb-item>
        </el-breadcrumb>
        <!--卡片视图区域-->
        <el-card>
            <!--个人信息区域-->
            <el-descriptions class="margin-top" title="个人信息" :column="3" :size="size" border>
                <template #extra>
                    <el-button type="primary" @click="showEditDialog">修改</el-button>
                </template>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <user />
                            </el-icon>
                            用户名
                        </div>
                    </template>
                    {{this.info.compID}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <House />
                            </el-icon>
                            公司名称
                        </div>
                    </template>
                    {{this.info.name}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <user />
                            </el-icon>
                            法人代表
                        </div>
                    </template>
                    {{this.info.legal}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <Star />
                            </el-icon>
                            公司类别
                        </div>
                    </template>
                    {{this.info.com_type}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <OfficeBuilding />
                            </el-icon>
                            地址
                        </div>
                    </template>
                    {{this.info.ADDR}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <Calendar />
                            </el-icon>
                            成立时间
                        </div>
                    </template>
                    {{this.info.FoundDate}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <lock />
                            </el-icon>
                            密码
                        </div>
                    </template>
                    {{this.info.passwd}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <tickets />
                            </el-icon>
                            账户类型
                        </div>
                    </template>
                    <el-tag size="small">公司管理员</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <Memo />
                            </el-icon>
                            公司简介
                        </div>
                    </template>
                    {{this.info.Intro}}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <!--修改信息对话框-->
        <el-dialog title="修改个人信息" v-model="editInfoVisible" width="50%" @close="editDialogClosed">
            <!--内容主体区域-->
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="80px">
                <el-form-item label="用户名" prop="compID">
                    <el-input v-model="info.compID" disabled></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="passwd">
                    <el-input v-model="editForm.passwd" type="password"></el-input>
                </el-form-item>
                <el-form-item label="法人" prop="legal">
                    <el-input v-model="editForm.legal"></el-input>
                </el-form-item>
                <el-form-item label="公司名称" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="公司类型" prop="com_type">
                    <el-input v-model="editForm.com_type"></el-input>
                </el-form-item>
                <el-form-item label="公司地址" prop="ADDR">
                    <el-input v-model="editForm.ADDR"></el-input>
                </el-form-item>
                <el-form-item label="成立时间" prop="FoundDate">
                    <el-input v-model="editForm.FoundDate"></el-input>
                </el-form-item>
                <el-form-item label="公司简介" prop="Intro">
                    <el-input v-model="editForm.Intro"></el-input>
                </el-form-item>
            </el-form>
            <!--底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="editInfoVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            info: {
                compID: '',
                passwd: '',
                legal: '',
                name: '',
                com_type: '',
                ADDR: '',
                FoundDate: '',
                status: '',
                Intro: ''
            },
            //控制修改岗位对话框的显示与隐藏
            editInfoVisible: false,
            editForm: {
                compID: '',
                passwd: '',
                legal: '',
                name: '',
                com_type: '',
                ADDR: '',
                FoundDate: '',
                Intro: ''
            },
            //修改表单的验证规则
            editFormRules: {
                editpasswd: [
                    { required: true, message: '请输入新密码', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.getComInfo();
    },
    methods: {
        async getComInfo() {
            const json = {
                id: window.sessionStorage.getItem('token'),
                type: 2
            };
            const { data: res } = await this.$http.post('getInfoByID', json)
            if (res.error_code !== 0) {
                return this.$message.error('获取个人信息失败！')
            }
            this.info = res.data;
        },
        //监听修改对话框的关闭事件
        editDialogClosed() {
            this.$refs.editFormRef.resetFields()
        },
        //点击修改
        async edit() {
            this.$refs.editFormRef.validate(async valid => {
                if (!valid) return
                const json = {
                    id: window.sessionStorage.getItem('token'),
                    passwd: this.editForm.passwd,
                    type: 2,
                    legal: this.editForm.legal,
                    name: this.editForm.name,
                    com_type: this.editForm.com_type,
                    ADDR: this.editForm.ADDR,
                    Found_Date: this.editForm.FoundDate,
                    Intro: this.editForm.Intro
                };
                console.log(json);
                const { data: res } = await this.$http.post('changeCompInfo', json)
                if (res.error_code !== 0) {
                    return this.$message.error('修改个人信息失败')
                }
                this.$message.success('修改成功')
                //隐藏修改岗位对话框
                this.editInfoVisible = false
                //重新获取信息数据
                this.getComInfo()
            })
        },
        //展示编辑对话框
        async showEditDialog() {
            this.editForm = this.info;
            this.editInfoVisible = true
        }
    }
}
</script>

<style lang="less" scoped>

</style>